<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
		<title>绑定银行卡</title>
	</head>
	<link rel="stylesheet" href="font/iconfont.css" />
	<link rel="stylesheet" href="css/css.css" />
	<link rel="stylesheet" href="dist/lib/weui.min.css">
	<link rel="stylesheet" href="dist/css/jquery-weui.min.css">
	<link rel="stylesheet" href="js/layui/css/layui.css" />
	<script type="text/javascript" src="dist/lib/jquery-2.1.4.js" ></script>
	<script src="dist/js/jquery-weui.min.js"></script>
	<script type="text/javascript" src="js/layui/layui.js" ></script>
	<script type="text/javascript" src="dist/lib/fastclick.js"></script>
	
	<link rel="stylesheet" href="css/LArea.css">
	<style>
		body{line-height: 1.6 !important;}
* {
	margin: 0;
	padding: 0;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	box-sizing: border-box;
}

html,
body {
	margin: 0 auto;
	width: 100%;
	min-height: 100%;
	overflow-x: hidden;
	-webkit-user-select: none;
}

body {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	-webkit-text-size-adjust: 100%; //关闭自动调整字体
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}



#yh-dialog{
	position: fixed;
	width: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 1000;
		height: 100%;
}
#dialog-content{
	position: fixed;
	width: 85%;
	background: white;
	border-radius: 5px;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	
}

	</style>
	<body ontouchstart style="background-color:#f7f7f7;" >
		
		
		
		<div id="yh-dialog">
			<div id="dialog-content">

			 <div class="weui-cell">
			    <div class="weui-cell__bd">
			      <p>中国工商银行</p>
			    </div>
			    <div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio"/></div>
			 </div>
				
			<div class="weui-cell">
			    <div class="weui-cell__bd">
			      <p>中国农业银行</p>
			    </div>
			    <div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio"/></div>
			  </div>	
				
			<div class="weui-cell">
			    <div class="weui-cell__bd">
			      <p>中国银行</p>
			    </div>
			    <div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio"/></div>
			  </div>	
				
			<div class="weui-cell">
			    <div class="weui-cell__bd">
			      <p>中国建设银行</p>
			    </div>
			    <div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio"/></div>
			  </div>	
				
			<div class="weui-cell">
			    <div class="weui-cell__bd">
			      <p>兴业银行</p>
			    </div>
			    <div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio"/></div>
			  </div>	
			
			<div class="weui-cell">
			    <div class="weui-cell__bd">
			      <p>中国邮政储蓄银行</p>
			    </div>
			    <div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio"/></div>
			  </div>
				
			<div class="weui-cell">
			    <div class="weui-cell__bd">
			      <p>平安银行</p>
			    </div>
			    <div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio"/></div>
			  </div>
			  
			  <div class="weui-cell">
			    <div class="weui-cell__bd">
			      <p>中国民生银行</p>
			    </div>
			    <div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio"/></div>
			  </div>
			  
			  <div class="weui-cell">
			    <div class="weui-cell__bd">
			      <p>交通银行</p>
			    </div>
			    <div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio"/></div>
			  </div>
			  
			  <div class="weui-cell">
			    <div class="weui-cell__bd">
			      <p>中信银行</p>
			    </div>
			    <div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio"/></div>
			  </div>
			  
				
			</div>			
		</div>
		
		<script>
			
			var dialogContent=document.getElementById('dialog-content');
			var yhDialog=document.getElementById('yh-dialog');
			var yh=document.getElementById('yh');
			
			
			$('.yh-radio').on("click",function(){
		var haschecked=$('input[name=yh-radio]:checked')
		if($(this).is(':checked')){
			setTimeout(function(){
				dialogContent.style.display="none";				
			    yhDialog.style.display="none";	
			    yh.
			
			},200)

		}
	})
		</script>
		
		<header class="wy-header" style=" background-color: #fff;">
			<div class="wy-header-icon-back">
				<a href="javascript:history.back(-1)"><i class="iconfont icon-left6"></i></a>
			</div>
			<div class="wy-header-title">绑定银行账号</div>
		</header>
		<div class="weui-cells user-bangding" style="margin-top:5px;">
			<div class="font-sm-color3" style="padding: 15px;">
				<img src="dist/demos/images/icon_nav_noti.png" width="15px"  style="margin-right: 10px;"/>姓名必须和身份证中的一样，务必保证身份证银行卡信息正确，否则无法退款	
			</div>
			<div class="weui-cell font-sm-color2">持卡人：<input type="text" value="宋菲菲" /></div>
			<div class="weui-cell font-sm-color2">卡号：<input type="text" value="410256256232533265" /></div>
			<div class="weui-cell font-sm-color2">银行：<input type="text" value="410256256232533265" id="yh"/></div>
			<div class="weui-cell font-sm-color2">所在城市：
				<input id="demo1" type="text" readonly="" placeholder="请选择所在城市"   style="flex: 1;color:#000!important;">
				<input id="value1" type="hidden" value="17,191,3796">
			</div>
			<div class="weui-cell font-sm-color2">支行名称：<input type="text" value="二里岗支行" /></div>
		</div>
		<div style="margin: 0px 15px;">
			<button type="submit" class="weui-btn addID_tbn">提交审核</button>
		</div>	
		<script src="js/LAreaData1.js"></script>
		<script src="js/LAreaData2.js"></script>
		<script src="js/LArea.js"></script>
		<script>
		var area1 = new LArea();
		area1.init({
			'trigger': '#demo1', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
			'valueTo': '#value1', //选择完毕后id属性输出到该位置
			'keys': {
				id: 'id',
				name: 'name'
			}, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
			'type': 1, //数据源类型
			'data': LAreaData //数据源
		});
		area1.value=[1,13,3];//控制初始位置，注意：该方法并不会影响到input的value
		var area2 = new LArea();
		area2.init({
			'trigger': '#demo2',
			'valueTo': '#value2',
			'keys': {
				id: 'value',
				name: 'text'
			},
			'type': 2,
			'data': [provs_data, citys_data, dists_data]
		});
</script>

	<script>
		layui.use('upload', function(){
			  var $ = layui.jquery
			  ,upload = layui.upload;
			  
			  //普通图片上传
			  var uploadInst = upload.render({
			    elem: '#upload_1'
			    ,url: '/upload/'
			    ,accept:'images'
			    ,acceptMime: 'image/*'		   //限制上传图片时打开文件夹只能看到图片文件 
			    ,exts: 'jpg|png|gif|bmp|jpeg|.jpg' 
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#upload_img1').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#Text1');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
			  
			  //普通图片上传
			  var uploadInst = upload.render({
			    elem: '#upload_2'
			    ,url: '/upload/'
			    ,accept:'images'
			    ,acceptMime: 'image/*'		   //限制上传图片时打开文件夹只能看到图片文件 
			    ,exts: 'jpg|png|gif|bmp|jpeg|.jpg' 
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#upload_img2').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#Text2');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
		});
		
		
		$(document).on("click", "#upload_img1", function() {
		    $.actions({
		      title: "选择操作",
		      onClose: function() {
		        console.log("close");
		      },
		      actions: [
		        {
		          text: "相册",
		          className: "color-warning",
		          onClick: function() {
		           $("#upload_1").trigger("click");
		          }
		        }
		      ]
		    });
		  });
		  
		  $(document).on("click", "#upload_img2", function() {
		    $.actions({
		      title: "选择操作",
		      onClose: function() {
		        console.log("close");
		      },
		      actions: [
		        {
		          text: "相册",
		          className: "color-warning",
		          onClick: function() {
		           $("#upload_2").trigger("click");
		          }
		        }
		      ]
		    });
		  });
	</script>	
		

		
	<!--footer-->
	<div class="weui-tabbar">
		<a href="首页.html" class="weui-tabbar__item">
			<div class="weui-tabbar__icon">
				<i class="iconfont icon-home"></i>
			</div>
			<p class="weui-tabbar__label">首页</p>
		</a>
		<a href="商品列表.html" class="weui-tabbar__item">
			<div class="weui-tabbar__icon">
				<i class="iconfont icon-renwu"></i>
			</div>
			<p class="weui-tabbar__label">已接任务</p>
		</a>
		<a href="分类.html" class="weui-tabbar__item">
			<div class="weui-tabbar__icon ">
				<i class="iconfont icon-xinxi2"></i>
			</div>
			<p class="weui-tabbar__label">申诉中心</p>
		</a>
		<a href="分类.html" class="weui-tabbar__item">
			<div class="weui-tabbar__icon ">
				<i class="iconfont icon-huodongzhongxin"></i>
			</div>
			<p class="weui-tabbar__label">活动中心</p>
		</a>
		<a href="个人中心.html" class="weui-tabbar__item weui-bar__item--on">
			<div class="weui-tabbar__icon">
				<i class="iconfont icon-wode2"></i>
			</div>
			<p class="weui-tabbar__label">我的</p>
		</a>
	</div>
		
		
	</body>
</html>